<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios测试用例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-case {
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px 0;
            padding: 15px;
        }
        .test-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        .test-result {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 3px;
            margin-top: 10px;
            white-space: pre-wrap;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <h1>Axios测试用例</h1>
    
    <div class="test-case">
        <div class="test-title">1. GET请求测试</div>
        <button id="getBtn">发送GET请求</button>
        <div id="getResult" class="test-result">点击按钮发送请求</div>
    </div>

    <div class="test-case">
        <div class="test-title">2. POST请求测试</div>
        <button id="postBtn">发送POST请求</button>
        <div id="postResult" class="test-result">点击按钮发送请求</div>
    </div>

    <div class="test-case">
        <div class="test-title">3. 并发请求测试</div>
        <button id="allBtn">发送并发请求</button>
        <div id="allResult" class="test-result">点击按钮发送并发请求</div>
    </div>

    <div class="test-case">
        <div class="test-title">4. 错误处理测试</div>
        <button id="errorBtn">发送错误请求</button>
        <div id="errorResult" class="test-result">点击按钮发送错误请求</div>
    </div>

    <script src="js/axios-0.18.0.js"></script>
    <script>
        // GET请求测试
        document.getElementById('getBtn').addEventListener('click', function() {
            const resultDiv = document.getElementById('getResult');
            resultDiv.textContent = '请求中...';
            
            // 使用JSONPlaceholder提供的测试API
            axios.get('https://jsonplaceholder.typicode.com/posts/1')
                .then(function (response) {
                    resultDiv.textContent = '响应数据:\n' + JSON.stringify(response.data, null, 2);
                })
                .catch(function (error) {
                    resultDiv.textContent = '请求失败: ' + error.message;
                });
        });

        // POST请求测试
        document.getElementById('postBtn').addEventListener('click', function() {
            const resultDiv = document.getElementById('postResult');
            resultDiv.textContent = '请求中...';
            
            axios.post('https://jsonplaceholder.typicode.com/posts', {
                title: '测试标题',
                body: '测试内容',
                userId: 1
            })
            .then(function (response) {
                resultDiv.textContent = '响应数据:\n' + JSON.stringify(response.data, null, 2);
            })
            .catch(function (error) {
                resultDiv.textContent = '请求失败: ' + error.message;
            });
        });

        // 并发请求测试
        document.getElementById('allBtn').addEventListener('click', function() {
            const resultDiv = document.getElementById('allResult');
            resultDiv.textContent = '请求中...';
            
            axios.all([
                axios.get('https://jsonplaceholder.typicode.com/posts/1'),
                axios.get('https://jsonplaceholder.typicode.com/users/1')
            ])
            .then(axios.spread(function (postResponse, userResponse) {
                resultDiv.textContent = '并发请求结果:\n' +
                    '文章标题: ' + postResponse.data.title + '\n' +
                    '用户名称: ' + userResponse.data.name;
            }))
            .catch(function (error) {
                resultDiv.textContent = '请求失败: ' + error.message;
            });
        });

        // 错误处理测试
        document.getElementById('errorBtn').addEventListener('click', function() {
            const resultDiv = document.getElementById('errorResult');
            resultDiv.textContent = '请求中...';
            
            axios.get('https://jsonplaceholder.typicode.com/posts/999999')
                .then(function (response) {
                    if (response.status === 404) {
                        resultDiv.textContent = '请求资源未找到';
                    } else {
                        resultDiv.textContent = '响应数据:\n' + JSON.stringify(response.data, null, 2);
                    }
                })
                .catch(function (error) {
                    resultDiv.textContent = '请求失败:\n' +
                        '状态码: ' + (error.response ? error.response.status : '无响应') + '\n' +
                        '错误信息: ' + error.message;
                });
        });
    </script>
</body>
</html>